<template>
	<view class="wrap">
		<view class="wrap__form">
		<!-- 	<view class="form__item">
				<view class="item__left">
					<picker mode="selector" :range="phoneTypes" @change="typeChange">
							<text class="left__text">+{{phoneTypes[phoneTypeIndex]}}</text>
					</picker>
					<image src="@/static/icons/input_down.png" mode="widthFix" class="left__icon"></image>
				</view>
				<input type="number" v-model.trim="phone" class="item__input" :placeholder="$t('login.inputPhone')" maxlength="18" />
			</view> -->
			<view class="form__item">
				<inputPwd :placeholder="$t('register.pwsLength')" ref="pwd"></inputPwd>
			</view>
			<view class="form__item">
				<inputPwd :placeholder="$t('register.pwsAgain')" ref="pwdRepeat"></inputPwd>
			</view>
			<view class="form__btn" @click="enterClick">{{$t('uni.showModal.confirm')}}</view>
		</view>
	</view>
</template>

<script>
	import {countries} from '@/common/js/county.js'
	import inputPwd from '@/components/common/inputPwd.vue'
	export default {
		components:{
			inputPwd
		},
		data() {
			return {
				phoneTypes:["82", "86", "1", "44", "49", "81","65", "91"],
				phoneTypeIndex:0,
				phone: "",
				showPassword: false,
				isShowPwd: false,
				isShowEntPwd: false,
			}
		},
		methods: {
			// 類型切換
			typeChange(e){
				let {value} = e.detail
				if(this.phoneTypeIndex !== value){
					this.phoneTypeIndex = value
				}
			},
			// 修改点击
			async enterClick() {
				let pwd = this.$refs.pwd.pwd
				let repeatPwd = this.$refs.pwdRepeat.pwd
				if(pwd.length < 6 || repeatPwd < 6){
					this.showToast(this.$t('register.pwsLength'))
					return
				}
				if(pwd !== repeatPwd){
					this.showToast(this.$t('register.pwdSame'))
					return
				}
				let params = {
					newpassword:pwd,
				}
				uni.showLoading({
					title:this.$t('loading.loading'),
					mask:true
				})
				let res = await this.$api.resetPwd(params)
				uni.hideLoading()
				if(res.code===1){
					uni.showToast({
						title:this.$t('success.success'),
						icon:"success",
						mask:true
					})
					setTimeout(()=>{
						uni.switchTab({
							url:"/pages/mine/mine"
						})
					}, 1200)
				}else{
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
			},
			// 显示提示
			showToast(msg) {
				uni.showToast({
					title: msg,
					icon: "none"
				})
			},
			// 密碼輸入框
			onInput(e, type) {
				let {
					value
				} = e.detail
				this[type] = value ? true : false
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		.wrap__form {
			padding: 100rpx 54rpx;
			box-sizing: border-box;

			.form__item {
				width: 640rpx;
				height: 120rpx;
				background: #282c41;
				border-radius: 12rpx;
				@include flexRowAlign();
				padding: 0 30rpx;
				box-sizing: border-box;
				margin-bottom: 40rpx;

				.item__left {
					@include flexRowAlign();
					margin-right: 38rpx;
					font-size: 32rpx;
					color: #FFFFFF;
					.left__num {
						font-size: 32rpx;
						color: #FFFFFF;
					}

					.left__icon {
						width: 18rpx;
						height: 12rpx;
						margin-left: 18rpx;
					}
				}

				.item__input {
					flex: 1;
					font-size: 32rpx;
					color: #fff;
					
				}

				.item__password {
					@include flexRowAlign();
					.password__icon {
						width: 38rpx;
						height: 28rpx;
					}
				}
				.item__code {
					.code__tips {
						font-size: 30rpx;
						font-weight: bold;
						color: #458EF4;
					}
				}
			}
			.form__btn {
				@include flexCenter();
				margin-top: 70rpx;
				width: 640rpx;
				height: 120rpx;
				background: #458EF4;
				border-radius: 12rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
</style>